/* pages/findCamp/findCamp.wxss */
page{
      background-color: #f4f4f4;
    //   background-color: #905e5e;
}
.van-search__content--round {
    width: 86%;
    border: 2rpx solid #f39e00;
    box-sizing: border-box;
    margin-right: 20rpx;
    padding-left: 20rpx;
}
.search-button{
    margin-right: 20px;
}

// 热门搜索
.hot-search{
    width: 94%;
    height: 70rpx;
    line-height: 70rpx;
    margin: 0 auto;
    font-size: 32rpx;
    font-weight: 600;
}
// .hot-search-list {
//     width: 94%;
//     display: flex;
//     flex-wrap: wrap;
//     justify-content: flex-start;
//     margin: 10rpx auto;
//     padding-left: 40rpx;
//     font-size: 24rpx;
//     color: #3d3d3d;
//     .hot-search-item {
//         width: 100rpx;
//         height: 40rpx;
//         line-height: 40rpx;
//         padding: 0 10rpx;
//         margin: 20rpx 20rpx;
//         border-radius: 10rpx;
//         border: 1rpx solid #b2afaf;
//     }
// }

.hot-search-list {  
    width: 94%; /* 或您希望的任何宽度 */  
    display: grid;  
    grid-template-columns: repeat(4, 1fr); /* 创建4列，每列宽度相等 */  
    gap: 20rpx; /* 设置网格项之间的间隙（包括列间隙和行间隙，如果需要单独设置，请使用grid-column-gap和grid-row-gap） */  
    margin: 10rpx auto; /* 垂直外边距和水平自动外边距以在容器中居中 */  
    align-items: start; /* 确保网格项在交叉轴（垂直方向）上从起点开始对齐 */  
    padding: 10rpx; /* 可选，用于在网格内容周围添加一些空间 */  
    font-size: 24rpx;
    color: #3d3d3d;
}  
  
.hot-search-item {  
    width: auto; /* 由于Grid会管理宽度，这里可以设置为auto */
    max-width: 100%;
    height: 45rpx;  
    line-height: 45rpx;  
    padding: 0 10rpx;  
    border-radius: 10rpx;  
    border: 1rpx solid #b2afaf;  
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* 注意：Grid布局会自动处理元素的换行，当一行放不下更多元素时，会自动移到下一行 */  
}

.search-history {
    width: 94%;
    margin: 0 auto;
    height: 70rpx;
    line-height: 70rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search-title {
        font-size: 32rpx;
        font-weight: 600;
    }
}
.clear-history {
    font-size: 24rpx;
    color: #8a8a8a;
}
.search-history-list {
    // flex-wrap: wrap;
}